/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, LineColumn, InputLine, TextArea, Input, SuffixInput, BlobInputList, InputIdProvider, InputDatalist,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps,  useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet} from "../../../common/tool";
import {检验结果选} from "./editorMacr";

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
    iAname?: string[];           //附加的存储那些字段     ，'观测备注'
}

export const item附件紧急 = [
    ['安全阀', '安全阀'],
    ['呼吸阀', '呼吸阀'],
    ['急泄放', '紧急泄放装置'],
    ['爆破片', '爆破片'],
    ['减压阀', '真空减压阀'],
];
export const itemA附件紧急: string[] = ['附件结果', '导静电','装卸阀', ];
item附件紧急.forEach(([name, title], i: number) => {
    itemA附件紧急.push(name as string);
});
export const item附件压力 = [
    ['装卸附', [{t:'9',s:2},{t:'装卸附件',s:2}], '快装接头无锈蚀、变形、裂纹和其他损坏，密封结构可靠'],
    ['卸用管', [{}, {}], '装卸用管外观良好，具备有效的校验证明。', ],
    ['压力表', [{t:'10',},{t:'压力表',}], '外观良好；具备有效的校验证明。'],
    ['温度计', [{t:'11',},{t:'温度计',}], '外观良好；具备有效的校验证明。'],
];
item附件压力.forEach(([name, title, initIsp], i: number) => {
    itemA附件紧急.push(name as string);
});
export const item附件焊接 = [
    ['紧断阀', [{t:'1',s:5},{t:'紧急切断阀',s:5}], '外观完好，无破损、泄漏', 'm'],
    ['紧型数', [{}, {}], '型号/数量', {u:'个'}],
    ['自动切', [{}, {}], '设置有符合要求的易熔塞自动切断装置',  ],
    ['远程控', [{}, {}], '远程控制系统的关闭操作装置安装于人员易于到达的位置，操作灵活可靠、到位', ],
    ['秒内闭', [{}, {}], '紧急切断阀应在5s内闭止' ],
];
item附件焊接.forEach(([name, title, initIsp], i: number) => {
    itemA附件紧急.push(name as string);
});
/**中间部分比较统一的，其它部分区域非常不规矩的。
 * 头 1+ 7，8特殊； 最后3项目方案也不同 【混合品种】。
 * */
export const Attachments =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, iAname,}: Props, ref
    ) => {
        let oldTitle1: any;
        let oldTitle2: any;
        const {inp, setInp} = useItemInputControl({ref});
        // const {render, itemObservation, itemObservationA,} = useMeasureListCrit(inp, setInp,
        //     config制动距离, false, false);
        const itemA = React.useMemo(() => {
            return [ ...iAname ?? [], ...itemA附件紧急];
        }, [ iAname]);
        const [getInpFilter] = useMeasureInpFilter(null, itemA,);
        // const resulName = (items空载制动[0][0] ?? '仪一往') as string;         //用制动性能测量仪:的检验结果，对应存储名；
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">{label}：</Text>
                {item附件焊接.map(([name, titlps, item, unit]: any, i: number) => {
                    //前缀可支持三个附加列配置的；
                    const [{t: title}, more2, more3] = titlps?.length > 0 ? titlps : ([{}] as any);
                    const {t: title2} = more2 || {};
                    const {t: title3} = more3 || {};
                    oldTitle1 = titlps?.length >= 1 ? (title ? title : oldTitle1) : '';
                    oldTitle2 = titlps?.length >= 2 ? (title2 ? title2 : oldTitle2) : '';
                    return (<React.Fragment key={i}>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            <Text>项目{title ?? oldTitle1} - {title2 ?? oldTitle2} {'>'} {title3} {title3 && '>'} {item}：</Text>
                            { i===1 && <>
                                <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                    &nbsp;型号
                                    <Input value={inp?.[name]?.x || ''} size={16}
                                           style={{display: 'inline-flex', width: '10rem'}}
                                           onChange={e => objNestSet(name, 'x', e.currentTarget.value || undefined, inp, setInp)}/>
                                </div>
                                <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                    &nbsp;数量
                                    <Input value={inp?.[name]?.s || ''} size={3}
                                           style={{display: 'inline-flex', width: '3rem'}}
                                           onChange={e => objNestSet(name, 's', e.currentTarget.value || undefined, inp, setInp)}/>个
                                </div>
                            </>
                            }
                            <div>
                                &nbsp;检验结果
                                <InputIdProvider>
                                    <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                                   style={{display: 'inline-flex', width: '11rem'}}
                                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                                </InputIdProvider>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                &nbsp;备注
                                <BlobInputList value={inp?.[name]?.m || ''} datalist={['见结果栏']}
                                               style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                               onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                    </React.Fragment>);
                })}

                {item附件紧急.map(([name, title]: any, i: number) => {
                    return (<React.Fragment key={i}>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            <Text>项目{i + 2} {title}：</Text>
                            <div>
                                <Text>外观完好，无破损、泄漏</Text>
                                <InputIdProvider>
                                    <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                                   style={{display: 'inline-flex', width: '6rem'}}
                                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                                </InputIdProvider>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                备注
                                <BlobInputList value={inp?.[name]?.m || ''} datalist={['见结果栏']}
                                               style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                               onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                &nbsp;型号
                                <Input value={inp?.[name]?.x || ''} size={16}
                                       style={{display: 'inline-flex', width: '10rem'}}
                                       onChange={e => objNestSet(name, 'x', e.currentTarget.value || undefined, inp, setInp)}/>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                &nbsp;数量
                                <Input value={inp?.[name]?.s || ''} size={3}
                                       style={{display: 'inline-flex', width: '3rem'}}
                                       onChange={e => objNestSet(name, 's', e.currentTarget.value || undefined, inp, setInp)}/>个
                            </div>
                            <div>
                                <Text>；结果</Text>
                                <InputIdProvider>
                                    <InputDatalist value={(inp?.[name]?.xr) || ''} datalist={检验结果选}
                                                   style={{display: 'inline-flex', width: '6rem'}}
                                                   onListChange={v => objNestSet(name, 'xr', v || undefined, inp, setInp)}/>
                                </InputIdProvider>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                备注
                                <BlobInputList value={inp?.[name]?.xm || ''} datalist={['见结果栏']}
                                               style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                               onListChange={v => objNestSet(name, 'xm', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                &nbsp;校验有效期至
                                <Input value={inp?.[name]?.V || ''} size={6} type='date' style={{display: 'inline-flex', width: '9rem'}}
                                       onChange={e => objNestSet(name, 'V', e.currentTarget.value || undefined, inp, setInp)}/>
                            </div>
                            <div>
                                <Text>结果</Text>
                                <InputIdProvider>
                                    <InputDatalist value={(inp?.[name]?.R) || ''} datalist={检验结果选}
                                                   style={{display: 'inline-flex', width: '6rem'}}
                                                   onListChange={v => objNestSet(name, 'R', v || undefined, inp, setInp)}/>
                                </InputIdProvider>
                            </div>
                            <div css={{display: 'inline-flex', alignItems: 'center'}}>
                                备注
                                <BlobInputList value={inp?.[name]?.M || ''} datalist={['见结果栏']}
                                               style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                               onListChange={v => objNestSet(name, 'M', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                    </React.Fragment>);
                })}

               项目7 导静电装置{'>>'}
                <LineColumn>
                    <InputLine label='导静电装置的接地线与车架之间电阻值≤5Ω'>
                        <InputDatalist value={(inp?.导静电?.r) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('导静电', 'r', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.导静电?.m || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('导静电', 'm', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='实测电阻值'>
                        <SuffixInput value={inp?.导静电?.x || ''} size={16} style={{display: 'inline-flex', width: '10rem'}}
                               onChange={e => objNestSet('导静电', 'x', e.currentTarget.value || undefined, inp, setInp)} >Ω</SuffixInput>
                    </InputLine>
                    <InputLine label='电阻值-结果'>
                        <InputDatalist value={(inp?.导静电?.xr) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('导静电', 'xr', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.导静电?.xm || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('导静电', 'xm', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='检测仪器编号'>
                        <Input value={inp?.导静电?.V || ''} size={16} style={{display: 'inline-flex', width: '10rem'}}
                               onChange={e => objNestSet('导静电', 'V', e.currentTarget.value || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='仪器编号-结果'>
                        <InputDatalist value={(inp?.导静电?.R) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('导静电', 'R', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.导静电?.M || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('导静电', 'M', v || undefined, inp, setInp)}/>
                    </InputLine>
                </LineColumn>
                项目8 装卸阀门{'>>'}
                <LineColumn>
                    <InputLine label='外观完好，无破损，操作自如，关闭状态下无泄漏'>
                        <InputDatalist value={(inp?.装卸阀?.r) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('装卸阀', 'r', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.装卸阀?.m || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('装卸阀', 'm', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='数量'>
                        <SuffixInput value={inp?.装卸阀?.x || ''} size={16} style={{display: 'inline-flex', width: '10rem'}}
                                     onChange={e => objNestSet('装卸阀', 'x', e.currentTarget.value || undefined, inp, setInp)} >个</SuffixInput>
                    </InputLine>
                    <InputLine label='数量-结果'>
                        <InputDatalist value={(inp?.装卸阀?.xr) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('装卸阀', 'xr', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.装卸阀?.xm || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('装卸阀', 'xm', v || undefined, inp, setInp)}/>
                    </InputLine>
                </LineColumn>
                <Text>充装易燃介质的罐体，阀门材质应为不产生火花的铜、铝合金或 不锈钢材质；充装毒性程度为极度、高度危害介质和强腐蚀介质 的罐体，阀门公称压力应不低于1.6 MPa；</Text>
                <LineColumn>
                    <InputLine label='结果'>
                        <InputDatalist value={(inp?.装卸阀?.R) || ''} datalist={检验结果选} style={{display: 'inline-flex', width: '6rem'}}
                                       onListChange={v => objNestSet('装卸阀', 'R', v || undefined, inp, setInp)}/>
                    </InputLine>
                    <InputLine label='备注'>
                        <BlobInputList value={inp?.装卸阀?.M || ''} datalist={['见结果栏']} style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                       onListChange={v => objNestSet('装卸阀', 'M', v || undefined, inp, setInp)}/>
                    </InputLine>
                </LineColumn>

                {item附件压力.map(([name, titlps, item, unit]: any, i: number) => {
                    //前缀可支持三个附加列配置的；
                    const [{t: title}, more2, more3] = titlps?.length > 0 ? titlps : ([{}] as any);
                    const {t: title2} = more2 || {};
                    const {t: title3} = more3 || {};
                    oldTitle1 = titlps?.length >= 1 ? (title ? title : oldTitle1) : '';
                    oldTitle2 = titlps?.length >= 2 ? (title2 ? title2 : oldTitle2) : '';
                    return (<React.Fragment key={i}>
                        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                            <Text>项目 {title ?? oldTitle1} - {title2 ?? oldTitle2} {'>'} {title3} {title3 && '>'} {item}：</Text>
                            &nbsp;
                            <div>
                                检验结果
                                <InputIdProvider>
                                    <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                                   style={{display: 'inline-flex', width: '11rem'}}
                                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                                </InputIdProvider>
                            </div>
                            <div css={{display: 'inline-flex',alignItems: 'center'}}>
                                &nbsp;备注
                                <BlobInputList value={inp?.[name]?.m || ''} datalist={['见结果栏']}
                                               style={{display: 'inline-flex', width: '12rem'}} rows={1}
                                               onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                            </div>
                        </div>
                    </React.Fragment>);
                })}

                附件检验报告-结果：
                <TextArea value={inp?.附件结果 || ''} rows={3}
                          onChange={e => setInp({...inp, 附件结果: e.currentTarget.value || undefined})}/>
                {children}
            </InspectRecordLayout>
        );
    });

